<template>
  <!-- 多租户/新增下级组织 -->
  <div>
    <el-dialog
      title="添加下级组织"
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="handleClose"
    >
      <div>
        <SearchForm
          :data="searchContent"
          @searchForm="searchForm"
          @resetForm="resetForm"
          ref="addSubOrgQuery"
          label-width="120px"
        />
        <el-editable
          v-loading="addSubOrgLoading"
          :data="menuList"
          height="200"
          :columns="addSubOrgColumns"
          @selection-change="handleSelectionChange"
        >
        </el-editable>
        <el-pagination
          align="right"
          style="margin-top: 10px;"
          @size-change="sizeChange"
          @current-change="pageChange"
          :page-sizes="PAGE_NUMBER"
          :page-size="page.size"
          :current-page="page.page"
          :layout="PAGINATION_LAYOUT"
          :total="page.total"
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import SearchForm from '@components/search'
import ElEditable from '@components/el-editable/door/index.vue'
import {PAGINATION_LAYOUT, PAGE_NUMBER} from '@const/common.js'
import {hasIn} from 'lodash'
import {
  channelCompanyGetPage,
  AcOverallStructureSave
} from '@const/api_authCenter.js'
import {addSubOrgColumns, searchContent} from './const.js'
export default {
  components: {SearchForm, ElEditable},
  data() {
    return {
      dialogVisible: false,
      searchContent,
      formData: {
        id: '',
        companyName: '',
        companyType: ''
      },
      addSubOrgLoading: false,
      menuList: [],
      page: {
        size: 20,
        page: 1,
        total: 0
      },
      PAGE_NUMBER, // 页码数组
      PAGINATION_LAYOUT, // 页码功能布局
      addSubOrgColumns,
      curSelectNode: {},
      multipleSelection: [],
      isSubmit: true
    }
  },
  mounted() {},
  methods: {
    showDialog(curSelectNode) {
      this.curSelectNode = curSelectNode
      this.dialogVisible = true
      this.search()
    },
    handleClose() {
      this.$refs['addSubOrgQuery'].reset()
      this.formData.companyName = ''
      this.dialogVisible = false
    },
    pageChange(val) {
      this.page.page = val
      this.search()
    },
    sizeChange(val) {
      this.page.size = val
      this.search()
    },
    handleSelectionChange(data) {
      this.multipleSelection = data
    },
    submitForm() {
      if (!this.isSubmit) {
        return false
      }
      this.isSubmit = false
      let companyIdList = []
      if (!this.curSelectNode.ownerCompanyId) {
        this.$message.error('请选择体系树节点')
        this.dialogVisible = false
        return false
      }
      if (this.multipleSelection.length === 0) {
        this.$message.error('请选择下级组织')
        return false
      }
      this.multipleSelection.forEach(item => {
        companyIdList.push(item.companyId)
      })
      let params = {
        ancestorId: this.curSelectNode.ancestorId,
        companyIds: companyIdList,
        level: this.curSelectNode.level + 1,
        ownerCompanyId: this.curSelectNode.ownerCompanyId,
        pid: this.curSelectNode.id,
        sort: this.curSelectNode.childNode.length + 1
      }
      this.$axios({
        url: AcOverallStructureSave,
        method: 'post',
        data: params
      })
        .then(res => {
          if (res.data.msg === 'ok') {
            this.$message.success('新增成功')
            this.$emit('getTree')
          }
        })
        .finally(() => {
          this.dialogVisible = false
          setTimeout(() => {
            this.isSubmit = true
          }, 1000)
        })
    },
    resetForm() {
      this.page.page = 1
      this.search()
    },
    searchForm(val) {
      this.page.page = 1
      this.formData.companyName = val.companyName
      this.formData.companyType = val.companyType
      this.formData.partnership = val.partnership
      this.search()
    },
    search() {
      this.addSubOrgLoading = true
      this.$axios({
        url: channelCompanyGetPage,
        method: 'post',
        data: {
          page: this.page.page,
          size: this.page.size,
          companyType: this.formData.companyType,
          partnership: this.formData.partnership,
          companyName: this.formData.companyName
        }
      })
        .then(res => {
          if (res.data.code === '0') {
            let data = hasIn(res, ['data', 'payload']) ? res.data.payload : []
            this.menuList = data.content
            this.page.total = data.totalElements
          }
        })
        .finally(() => {
          this.addSubOrgLoading = false
        })
    }
  }
}
</script>
<style lang="less"></style>
